// src/pages/Home/HomeContent/index.js
import React from 'react';
import { Card, Row, Col, Statistic, Button, Tabs, Typography, Divider } from 'antd';
import {
  UserOutlined,
  TeamOutlined,
  SafetyCertificateOutlined,
  DatabaseOutlined,
  SendOutlined,
  SettingOutlined,
  BarChartOutlined,
  AppstoreOutlined,
  FundOutlined,
  DashboardOutlined,
  QuestionCircleOutlined
} from '@ant-design/icons';
import ReportTemplateMarket from '../DataAnalysis/ReportTemplateMarket';
import { useNavigate } from 'react-router-dom';

const { Title, Text } = Typography;

const HomeContent = () => {
  const navigate = useNavigate();

  // 快捷访问数据
  const quickAccessItems = [
    {
      title: '人事服务',
      description: '人事服务员工加班记录表',
      icon: <UserOutlined />,
      onClick: () => navigate('/user-management'),
    },
    {
      title: '部门管理',
      description: '查看和管理组织架构',
      icon: <TeamOutlined />,
      onClick: () => navigate('/department-management'),
    },
    {
      title: '角色权限',
      description: '配置系统角色和权限',
      icon: <SafetyCertificateOutlined />,
      onClick: () => navigate('/role-management'),
    },
    {
      title: '数据源管理',
      description: '连接和管理数据源',
      icon: <DatabaseOutlined />,
      onClick: () => navigate('/data-source'),
    },
  ];

  // 使用小贴士数据
  const tips = [
    '了解智数平台',
    '如何使用薪福通的数据制作报表',
    '如何从企业系统采集数据',
    '了解数据加工',
    '在数据加工时增加个性化字段',
    '学会使用报表模板',
    '学会钻取、联动、高级计算等高级分析能力',
    '来看复杂的报表怎么实现',
    '报表的授权规则'
  ];

  return (
    <div className="home-content">
      <div className="home-header">
        <h1>欢迎使用智数平台</h1>
        <p>一站式数据分析与报表解决方案</p>
      </div>

      <Row gutter={16}>
        {/* 左侧区域 */}
        <Col span={16}>
          {/* 统计卡片 */}
          <Card className="statistic-card" style={{ marginBottom: 16 }}>
            <Row gutter={16}>
              <Col span={6}>
                <Statistic title="数据源" value={12} prefix={<DatabaseOutlined />} />
              </Col>
              <Col span={6}>
                <Statistic title="仪表板" value={8} prefix={<DashboardOutlined />} />
              </Col>
              <Col span={6}>
                <Statistic title="图表数" value={42} prefix={<BarChartOutlined />} />
              </Col>
              <Col span={6}>
                <Statistic title="模板" value={24} prefix={<AppstoreOutlined />} />
              </Col>
            </Row>
          </Card>

          {/* 快捷访问 */}
          <Card title="快捷访问" className="quick-access-card">
            <Row gutter={[16, 16]}>
              {quickAccessItems.map((item, index) => (
                <Col span={6} key={index}>
                  <Card
                    hoverable
                    onClick={item.onClick}
                    style={{ cursor: 'pointer', height: '100%' }}
                  >
                    <div style={{ textAlign: 'center', marginBottom: 16 }}>
                      <div style={{ fontSize: '32px', color: '#1890ff' }}>
                        {item.icon}
                      </div>
                    </div>
                    <div style={{ textAlign: 'center' }}>
                      <Text strong>{item.title}</Text>
                      <div style={{ marginTop: 8, fontSize: '12px', color: '#999' }}>
                        {item.description}
                      </div>
                    </div>
                  </Card>
                </Col>
              ))}
            </Row>
          </Card>
        </Col>

        {/* 右侧区域 */}
        <Col span={8}>
          {/* 报表模板市场 */}
          <Card title="报表模板市场" className="template-market-card">
            <Tabs
              defaultActiveKey="template-market"
              items={[
                {
                  key: 'template-market',
                  label: '模板市场',
                  children: (
                    <div style={{ padding: '16px' }}>
                      <div style={{ display: 'flex', alignItems: 'center', marginBottom: 16 }}>
                        <div style={{ width: 24, height: 24, backgroundColor: '#1890ff', borderRadius: 4, marginRight: 8, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                          <BarChartOutlined style={{ color: 'white', fontSize: 16 }} />
                        </div>
                        <Text strong>财务服务凭证统计分析-模板</Text>
                      </div>
                      <div style={{ display: 'flex', alignItems: 'center', marginBottom: 16 }}>
                        <div style={{ width: 24, height: 24, backgroundColor: '#1890ff', borderRadius: 4, marginRight: 8, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                          <BarChartOutlined style={{ color: 'white', fontSize: 16 }} />
                        </div>
                        <Text strong>人力成本趋势分析-模板</Text>
                      </div>
                      <div style={{ display: 'flex', alignItems: 'center', marginBottom: 16 }}>
                        <div style={{ width: 24, height: 24, backgroundColor: '#1890ff', borderRadius: 4, marginRight: 8, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                          <BarChartOutlined style={{ color: 'white', fontSize: 16 }} />
                        </div>
                        <Text strong>福利订单分析-模板</Text>
                      </div>
                      <div style={{ display: 'flex', alignItems: 'center', marginBottom: 16 }}>
                        <div style={{ width: 24, height: 24, backgroundColor: '#1890ff', borderRadius: 4, marginRight: 8, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                          <BarChartOutlined style={{ color: 'white', fontSize: 16 }} />
                        </div>
                        <Text strong>没找到合适的模板？可快速制作报表</Text>
                      </div>
                      <div style={{ display: 'flex', gap: 16, marginTop: 16 }}>
                        <Button type="primary" size="small">仪表板制作</Button>
                        <Button size="small">数据大屏制作</Button>
                      </div>
                    </div>
                  ),
                },
                {
                  key: 'advanced-analysis',
                  label: '高级分析',
                  children: (
                    <div style={{ padding: '24px', textAlign: 'center' }}>
                      <h3>高级分析功能即将上线</h3>
                      <p>包括预测分析、关联分析、聚类分析等高级功能</p>
                      <Button type="primary">敬请期待</Button>
                    </div>
                  ),
                },
              ]}
            />
          </Card>

          {/* 使用小技巧 */}
          <Card title="使用小技巧" className="tips-card" style={{ marginTop: 16 }}>
            <ul style={{ paddingLeft: 24, margin: 0 }}>
              {tips.map((tip, index) => (
                <li key={index} style={{ marginBottom: 8 }}>
                  <Text type="secondary">{tip}</Text>
                </li>
              ))}
            </ul>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default HomeContent;
